<template>
  <div class="recommemd" ref="recommemd">
    <!-- 推荐列表 -->
    <div class="recommemdList">
      <ul>
        <li v-for="(ee, ei) in pageExpect" :key="ei">
          <router-link :to="{ path: '/rdVideo', query: { _id: ee.id } }">
            <!-- <img :src="`${ee.shareInfo.img}`" /> -->
            <img v-lazy="ee.shareInfo.img" :key="ee.shareInfo.img" />
            <p class="rec-title">{{ ee.shareInfo.title }}</p>
            <!-- 作者 -->
            <div class="rec-author">
              <div class="author1">
                <img :src="`${ee.user.avatarurl}`" alt="" />
                <!-- <img v-lazy="ee.user.avatarurl" :key="ee.user.avatarurl"/> -->
                <span>{{ ee.user.nickName }}</span>
              </div>
              <div class="author2">
                <i class="iconfont icon-dianzan"></i>
                <span>{{ ee.upCount }}</span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <p id="loading_txt" style="marginBottom:60px"></p>
    </div>
  </div>
</template>

<script>
import {  mapMutations } from "vuex";
import { Toast } from "vant";

export default {
  name: "pageExpect",
  data() {
    return {
      pageExpect: [],
      // isAchiveBottom: false, //滚动条是否到底部标志
      peoffset: 0, //初始化数据
      timer: null,
    };
  },
  components: {
    [Toast.name]: Toast,
  },
  created() {
    //  this.getData(1)
    // window.addEventListener("scroll", this.bottomOut);
    // window.addEventListener("scroll", this.throttle(this.bottomOut));
  },
  methods: {
    ...mapMutations(["changeHomepage"]),
    getData(k) {
      let pro = axios.get(`video/${k}`);
      pro
        .then((res) => {
          console.log("----", res.feeds);
          // 合并数组
          if (this.$store.state.homepageArray.length == 0) {
            //   赋值
            this.pageExpect = [];
            this.pageExpect = res.feeds;
            //  存值
            this.changeHomepage(this.pageExpect);
          } else {
            this.pageExpect = [];
            this.pageExpect = this.$store.state.homepageArray.concat(res.feeds);
          }
          setTimeout(() => {
            Toast.clear();
            this.isAchiveBottom = false;
          }, 2500);
          //  存值
          this.changeHomepage(this.pageExpect);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
  
    loadList(status) {
      status = status[0];
      let isShow = status.isIntersecting;
      if (isShow) {
        let nums = ++this.peoffset
        this.getData(nums)
        console.log("this.page ++ ", nums);
      } else {
        console.log("this.page 没有触底");
      }
    },
  },
  mounted() {
    let io = new IntersectionObserver(this.loadList, {});
    let viewList = document.getElementById("loading_txt");
    io.observe(viewList);
  },

};
</script>

<style lang="scss" scoped>
.recommemdList {
  ul {
    width: 352px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    li {
      margin: 10px 0;
      border-radius: 7px;
      background: #fff;
      img {
        width: 170px;
        height: 220px;
        object-fit: cover;
        border-radius: 7px;
        // min-height: 110px ;
      }
      // 标题
      .rec-title {
        font-size: 12px;
        font-weight: bold;
        line-height: 1.2;
        width: 160px;
        margin: 5px auto;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      // 作者
      .rec-author {
        width: 160px;
        margin: 5px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        .author1 {
          // 图片和文字居中
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
          span {
            margin-left: 5px;
            font-size: 12px;
          }
        }
        .author2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          i {
            font-size: 12px;
            margin-right: 2px;
          }
          span {
            font-size: 12px;
          }
        }
      }
    }
  }
}
// .recommemd{
//   width: 100%;
//   height: 100%;
//   position: relative;
// }
// .loading{
//   width: 100%;
//   height: 100%;
//   position:fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   margin: auto;
//   z-index: 999;
//   div{
//     width: 100%;
//     height: 100%;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//   }
// }
</style>